<template>
    <div class="mask" v-show="props.show">
        <div class="click"  @click="emit('close')"></div>
        <div class="container">
            <!-- <image src="/static/english/english_top_bg.png" class="bg" /> -->
            <picker-view indicator-style="height: 50px;" :value="valueData" @change="bindChange" immediate-change=true class="picker-view" >
                <picker-view-column>
                    <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
                </picker-view-column>
               <picker-view-column>
                    <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
            <div class="footer" @click="handleConfirm">    
                确定
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    const years = ref([]);
    const months = ref([]);
    const days = ref([]);
    const valueData = ref([2024,7,9]);
    const emitdata = ref([1990,1,1]);
    onLoad(()=>{
        const date = new Date();
        const newYears = [];
        const newMonths = [];
        const newDays = []
        for (let i = 1990; i <= date.getFullYear(); i++) {
            newYears.push(i)
        }
        for (let i = 1; i <= 12; i++) {
            newMonths.push(i)
        }
        for (let i = 1; i <= 31; i++) {
            newDays.push(i)
        }
        years.value = newYears;
        months.value = newMonths;
        days.value = newDays;
        valueData.value =[2024, 7, 9]
    })
    const props = defineProps({
        show: {
            type: Boolean,
            default: false
        },
        year: {
            type: Number,
            default: 2000
        },
        month: {
            type: Number,
            default: 2
        },
        day: {
            type: Number,
            default: 2
        }
    })
    const emit = defineEmits(['close', 'onConfirm']);
    const bindChange = (e)=>{
        const current = e.detail.value;
        const year = years.value[current[0]]
        const month = months.value[current[1]] < 10 ? `0${months.value[current[1]]}` : months.value[current[1]]
        const day = days.value[current[2]]  < 10 ? `0${days.value[current[2]]}` : days.value[current[2]]
        const data = [year, month, day]
        emitdata.value = data
    }
    const handleConfirm = () => {
        emit('onConfirm', emitdata.value)
        emit('close')
    }
</script>

<style lang="scss">
    .click{
        height: calc(100vh - 580rpx);
    }
    .container{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 580rpx;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 40rpx;
        overflow: hidden;
        .bg{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 500rpx;
            border-radius: 40rpx;
        }
        .picker-view {
            width: 100%;
            height: 380rpx;
        }
        .item {
            line-height: 100rpx;
            text-align: center;
        }
        .footer{
            width: calc(100% - 64rpx);
            border-radius: 40rpx;
            padding: 20rpx 0;
            background: linear-gradient( 315deg, rgba(78,197,132,0.6) 0%, #4ec584 100%);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
    }
</style>